// @media (min-aspect-ratio: 1980/1080){
//   #index {
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     transform-origin: left top;
//   }
// } 
// @media (max-aspect-ratio: 3840/1080){
//   #index {
//     top: 50%;
//     left: 83%;
//     transform: translate(-50%, -50%);
//     transform-origin: left top;
//   }
// } 
#index {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  color: #d3d6dd;
  width: 3840px;
  height: 2160px;
  position: absolute;
  // top: 50%;
  // left: 1400px;
  overflow: hidden;
  justify-content: center;

  .bg {
    width: 100%;
    height: 100%;
    padding: 16px;
    background-image: url("../assets/pageBg.png");
    background-size: cover;
    background-position: center center;
  }

  .host-body {

    .dv-dec-10,
    .dv-dec-10-s {
      width: 90%;
      height: 5px;
    }

    .dv-dec-10-s {
      transform: rotateY(180deg);
    }

    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }

    .title {
      position: relative;
      width: 600px;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }

      .dv-dec-6 {
        position: absolute;
        bottom: -50px;
        left: 30%;
        width: 90%;
        height: 25px;
        transform: translate(-50%);
      }
    }

    // 第二行
    .aside-width {
      width: 960px;
    }

    .react-r-s,
    .react-l-s {
      background-color: #115e92;
    }

    // 平行四边形
    .react-right {
      &.react-l-s {
        width: 600px;
        text-align: left;
      }

      font-size: 18px;
      width: 600px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);
      background-color: #0b456b;
      margin:0 5px;

      .react-before {
        position: absolute;
        left: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0b456b;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
        color: #fff;
      }
    }

    .react-time {
      &.react-l-s {
        text-align: right;
        width: 600px;
      }

      background-color: #0b456b;
      font-size: 18px;
      width: 600px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0b456b;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-left {
      &.react-l-s {
        width: 600px;
        text-align: left;
      }

      font-size: 18px;
      width: 600px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transform: skewX(45deg);
      background-color: #0b456b;
      margin:0 5px;
      // .react-before {
      //   position: absolute;
      //   left: -25px;
      //   top: 0;
      //   height: 50px;
      //   width: 50px;
      //   background-color: #0f1325;
      //   transform: skewX(-45deg);
      // }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
        color: #fff;
      }
    }

    .body-box {
      margin-top: -50px;
      display: flex;
      flex-direction: column;
    }
  }
  .el-tabs__item.is-active {
    color: #73daf9;
}
  .el-tabs__item:hover {
    color: #73daf9;
    cursor: pointer;
}
  // 选择器样式
  .el-input__inner {
    color: #fff;
    background: rgba(8, 48, 74, 0.5) !important;
    border-color: #71c9ee !important;
    // border-style: double;
    border-width: 1px;
    border-radius: 5px;
  }

  // 下拉框背景颜色
  .el-scrollbar {
    background: rgba(8, 48, 74, 1) !important;
  }

  .el-select-dropdown__item {
    color: #fff;
  }
  .el-select-dropdown__item.hover{
    background: rgb(23, 112, 172) ;
  }
  .el-select-dropdown__item:hover {
    color: #409EFF;
  }
  
 //显示时按钮样式 
 .el-button--primary { //需要更改的按钮类型 type='primary'
  background: rgba(8, 48, 74, 0.5) !important;
  border-color: #71c9ee !important;
  // border-style: double;
  border-width:1.5px;
  .is-round{
    border-radius:2px;
  }
}
//移入时按钮样式 type='primary'
.el-button--primary:hover {
  background: rgba(121, 202, 235, 0.3)!important;
  border-color: #71c9ee !important;
  color: #FFF !important;
}
//选中时按钮样式 type='primary'
.el-button--primary:focus {
  background:  rgba(121, 202, 235, 0.3)!important;
  border-color: #71c9ee !important;
  color: #FFF !important;
}
// .el-table th {
//   padding: 0;
// }
// .el-table__row td {
//   height: 30px;
//   padding: 0;
// }
// .el-table tr {
//   background-color: #061c2f;
// }
// .el-table th{
//   background-color: #061c2f;
// }
// .el-table thead {
//   color: #fff;
//   font-weight: 500;
// }
// .el-table {
//   color: #ffffff;
//   font-weight: 500;
// }

// .el-table tr:hover {
//   background: #447bbe;
// }
// .el-table tbody tr:hover>td {
//   background-color: #335885 !important;
// }


//表格背景
.el-table, .el-table__expanded-cell{
  
  background: #12222f;
}
.el-table tr{
  background: #12222f;
}
// 斑马纹颜色
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background-color: #126081;
  }
  .el-table tr:hover {
  background: #126081;
}
// 表格颜色
.el-table tbody tr:hover>td {
  background-color: #3290dd !important;
}
// el-table 去掉边框
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #0d475f;
  border: 0px solid #0d475f;
}
.el-table th.el-table__cell.is-leaf {
  color: #fff;
  background-color: #126081;
  border: 0px solid #126081;
  border-bottom: 0px solid #126081;
}
.el-table td.el-table__cell {
  color: #fff;
  background-color: #061c2f;
  border: 0px solid #061c2f;
  border-bottom: 0px solid #061c2f;
}
// 去掉最下面的那一条线
.el-table::before {
  height: 0px;
}
// 鼠标悬停
// .el-table tbody tr:hover > td {
//   background-color: #061c2f !important; //修改成自己想要的颜色即可
// }

.el-card {
  text-align: center;
  background: rgba(8, 48, 74, 0.5);
  border-color: #70c6ee !important;
  border-width:2px;
}
.ht {
  color: #fff;
  font-size: 13px;
  font-weight: bolder;
}
.hd {
  color: #fff;
  font-size: 20px;
  font-weight: bolder;
  line-height: 28px;
}
.hr {
  color: #fff;
  font-size: 13px;
  font-weight: bolder;
  line-height: 20px;
}
}